<template>
  <div class="alarmInfo">
    <div v-for="item in alarmInfoList" :key="item.code" class="items">
      <div class="logo"
           :style="{ 'background': 'url(' + item.img+ ') no-repeat', 'background-size': '100% 100%'}"
      />
      <div class="alarmData">
        <div>{{ alarmInfoData[item.code] }}</div>
        <div>{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AlarmInfo',
  props: {
    alarmInfoData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      alarmInfoList: [
        {
          code: 'enterpriseNumber',
          img: require('../../../assets/images/screen/monitorEnter.png'),
          label: '监测企业',
          value: '0'
        },
        {
          code: 'substationNumber',
          img: require('../../../assets/images/screen/monitorSiteNum.png'),
          label: '监测点位数',
          value: '0'
        },
        {
          code: 'substationOnLineNumber',
          img: require('../../../assets/images/screen/monitorOnLine.png'),
          label: '监测点位在线数',
          value: '0'
        }, {
          code: 'videoOnLineNumber',
          img: require('../../../assets/images/screen/vieoNum.png'),
          label: '视频在线数',
          value: '0'
        }, {
          code: 'callThePoliceSubstationNumber',
          img: require('../../../assets/images/screen/alarmSiteNum.png'),
          label: '报警站点数',
          value: '0'
        }, {
          code: 'callThePoliceNumber',
          img: require('../../../assets/images/screen/alarmNum.png'),
          label: '报警条数',
          value: '0'
        }, {
          code: 'dealWithNumber',
          img: require('../../../assets/images/screen/disposeNum.png'),
          label: '处理数',
          value: '0'
        }
      ]
    }
  },
  mounted() {
  },
  watch: {
    alarmInfoData: {
      handler(val) {
        this.$forceUpdate()
      },
      deep: true
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.alarmInfo {
  width: 100%;
  padding: 0 10px;
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;

  .items {
    width: 270px;
    height: 120px;
    float: left;
    background: url(../../../assets/images/screen/alarmInfo.png) no-repeat;
    background-size: 100% 100%;
    position: relative;

    .logo {
      width: 72px;
      height: 72px;
      background: #409EFF;
      position: absolute;
      top: 36px;
      left: 35px;
      //background: url(../../../assets/images/screen/alarmNum.png) no-repeat;

    }

    .alarmData {
      position: absolute;
      top: 42px;
      right: 20px;
      line-height: 1.5;

      div:nth-child(1) {
        letter-spacing: 2px;
        color: #F6FF0A;
        font-size: 26px;
      }

      div:nth-child(2) {
        color: #D5E3FF
      }
    }
  }
}
</style>
